<template>
    <div class="investment-summary">
        <div class="header">
            <h2>投资小结</h2>
            <el-button type="primary" @click="showAddDialog">发布今日小结</el-button>
        </div>

        <el-dialog
            v-model="dialogVisible"
            title="发布投资小结"
            width="60%"
        >
            <el-form :model="summaryForm" label-width="100px">
                <el-form-item label="日期">
                    <el-date-picker
                        v-model="summaryForm.date"
                        type="date"
                        placeholder="选择日期"
                    />
                </el-form-item>
                <el-form-item label="投资小结">
                    <el-input
                        v-model="summaryForm.content"
                        type="textarea"
                        :rows="8"
                        placeholder="请输入今日投资小结..."
                    />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitSummary">发布</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 历史小结列表 -->
        <div class="summary-list">
            <el-table :data="summaryList" style="width: 100%">
                <el-table-column prop="date" label="日期" width="180" />
                <el-table-column prop="content" label="投资小结" show-overflow-tooltip>
                    <template #default="scope">
                        <div class="content-cell">
                            {{ formatContent(scope.row.content) }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button size="small" @click="editSummary(scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="deleteSummary(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import investment from '../../../http/apis/investment'

const dialogVisible = ref(false)
const summaryForm = reactive({
    id: undefined as number | undefined,
    date: '',
    content: ''
})

// 投资小结列表
const summaryList = ref([])

// 获取投资小结列表
const getSummaryList = async () => {
    try {
        const res = await investment.getSummaryList()
        if (res.code === 200) {
            summaryList.value = res.data
        }
    } catch (error) {
        console.error('获取投资小结列表失败:', error)
    }
}

// 显示添加对话框
const showAddDialog = () => {
    dialogVisible.value = true
    summaryForm.id = undefined
    summaryForm.date = new Date().toISOString().split('T')[0]
    summaryForm.content = ''
}

// 提交投资小结
const submitSummary = async () => {
    try {
        let res
        if (summaryForm.id) {
            // 更新
            res = await investment.updateSummary(summaryForm)
        } else {
            // 新增
            res = await investment.addSummary(summaryForm)
        }

        if (res.code === 200) {
            ElMessage.success(summaryForm.id ? '更新成功' : '添加成功')
            dialogVisible.value = false
            getSummaryList() // 刷新列表
        }
    } catch (error) {
        console.error('提交投资小结失败:', error)
        ElMessage.error('操作失败')
    }
}

// 编辑投资小结
const editSummary = (row: any) => {
    dialogVisible.value = true
    Object.assign(summaryForm, {
        id: row.id,
        date: row.date,
        content: row.content
    })
}

// 删除投资小结
const deleteSummary = (row: any) => {
    ElMessageBox.confirm(
        '确定要删除这条投资小结吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(async () => {
        try {
            const res = await investment.deleteSummary(row.id)
            if (res.code === 200) {
                ElMessage.success('删除成功')
                getSummaryList() // 刷新列表
            }
        } catch (error) {
            console.error('删除投资小结失败:', error)
            ElMessage.error('删除失败')
        }
    }).catch(() => {})
}

// 页面加载时获取列表
onMounted(() => {
    getSummaryList()
})

// 格式化内容，限制显示长度
const formatContent = (content: string) => {
    const maxLength = 50 // 设置最大显示长度
    return content.length > maxLength 
        ? content.substring(0, maxLength) + '...'
        : content
}
</script>

<style scoped>
.investment-summary {
    width: 100%;
    height: 100%;
    padding: 20px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.summary-list {
    margin-top: 20px;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

:deep(.el-table .cell) {
    white-space: pre-line;
}

.content-cell {
    max-width: 500px; /* 设置最大宽度 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style> 